<!doctype html>
<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="translations_commons.js"></script>
	<title>TS100 Bitmap Editor</title>
	<style>
		.matrix {
			display: inline-block;
			padding: 0px 0px 1px 1px ;
			background-color: #666;
			margin-top: 1em;
			margin-bottom: 1em;
		}
		
		.matrix * {
			font-size:0;
		}
		.c {
			margin:1px 1px 0px 0px;
			display: inline-block;
			background-color: #fff;
			height:10px;
			width: 10px;
		}
		
		.x {
			background-color: #000;
		}
		
		.header {
		}
		
		.data input, .data textarea {
			margin-top: 1em;
			width: 100%;
		}
		
		.actions {
		}
	</style>
	<script>
	
	var ink, pressed, ev;
	function mousedown(e) {
		c = window.event.target;
		classes = c.className.split(" ");
		if (classes.indexOf("c")<0) {
			return;
		}
		ink = classes.indexOf("x")<0;
		pressed = true;
		ev = e;
		enter(e);
	}
	
	function mouseup(e) {
		ev = e;
		pressed = false;
	}
	
	function enter(e) {
		if (!pressed) {
			return;
		}
		ev = e;
		c = window.event.target;
		paint(c, ink);
		stringFromMatrix();
	}

	function paint(c, ink) {
		var cellInk = isInk(c);
		if (ink) {
			if (!cellInk) {
				c.className += " x";
			}
		} else {
			if (cellInk) {
				c.className = "c";
			}
		}
	}

	function isInk(c) {
		try {
			var classes = c.className.split(" ");
			return classes.indexOf("x") >= 0;
		} catch(e) {
			return false;
		}
	}
	
	function getMatrix() {
		return document.getElementById("matrix");
	}
	
	function getCoordinatesFromId(str) {
		i = str.indexOf('_');
		return {
			row: parseInt(str.substring(1, i)),
 			col: parseInt(str.substring(i+1))
		}
	}

	function clearMatrix() {
		for (var r = 0; r < app.matrix.rows; r++) {
			for (var c = 0; c < app.matrix.cols; c++) {
				paint(getCell(r, c), false);
			}
		}
	}
	
	function getCell(row, col) {
		return document.getElementById("C"+row+"_"+col);
	}
	
	function toMatrix(str) {
		app.encodedData = str;
		clearMatrix();
		var strs = str.split(/[ ,]/);
		var pair = false;
		var c = 0;
		var rs = 7;
		for (var i = 0; i<strs.length; i++) {
			var d = strs[i];
			if (d.length > 0) {
				if (startsWith(d, "0x")) {
					v = parseInt(d.substring(2), 16);
				} else {
					v = parseInt(d);
				}
				sv = padLeft(v.toString(2), "0", 8);
				for (r = 0; r < 8; r++) {
					paint(getCell(rs - r, c), sv.charAt(r) == '1');
				}
				c++;
				if (c >= app.matrix.cols) {
					c = 0;
					rs += 8;
				}
			}
		}
	}

	function stringFromMatrix() {
		var str = "";
		var delim = "";
		var blocks = app.matrix.rows / 8;
		var rs = 7;
		for (var block = 0; block < blocks; block++) {
			for (var c = 0; c < app.matrix.cols; c++) {
				var b = 0;
				for (var r = 0; r < 8; r++) {
					var cell = document.getElementById("C"+(rs-r)+"_"+c);
					if (isInk(cell)) {
						b |= (1 << (7-r));
					}
				}
				str += delim + "0x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
				delim = ",";
			}
			rs += 8;
		}
		app.encodedData = str;
		return str;
	}
	
	function start() {
		app = new Vue({
			el : '#app',
			data : {
				matrix: {
					cols: 12,
					rows: 16
				},
				type: "big",
				encodedData: ""
			},
			methods : {
				VtoMatrix : function(val) {
					toMatrix(val);
				},
				
				VchangeSize : function() {
					if (app.type == "big") {
						app.matrix.cols = 12;
						app.matrix.rows = 16;
					} else if (app.type == "small") {
						app.matrix.cols = 6;
						app.matrix.rows = 8;
					} else if (app.type == "icon") {
						app.matrix.cols = 16;
						app.matrix.rows = 16;
					} else if (app.type == "icon24") {
						app.matrix.cols = 24;
						app.matrix.rows = 16;
					} else if (app.type == "screen") {
						app.matrix.cols = 84;
						app.matrix.rows = 16;
					} else if (app.type == "fullscreen") {
						app.matrix.cols = 96;
						app.matrix.rows = 16;
					}
					stringFromMatrix();
				}
				
			}
		});
		toMatrix("0x00,0xF0,0x08,0x0E,0x02,0x02,0x02,0x02,0x0E,0x08,0xF0,0x00,0x00,0x3F,0x40,0x5C,0x5C,0x5C,0x5C,0x5C,0x5C,0x40,0x3F,0x00");
	}

	window.onload=start; 
	</script>

	
</head>
<body>
	<div id="app">
		<div class="header">
			<select v-model="type" v-on:change="VchangeSize()">
				<option value="small">Small Font (6x8)</option>
				<option value="big">Big Font (12x16)</option>
				<option value="icon">Icon (16x16)</option>
				<option value="icon24">Icon (24x16)</option>
				<option value="screen">Screen (84x16)</option>
				<option value="fullscreen">Full Screen (96x16)</option>
			</select>
		</div>
		<div id="matrix" class="matrix" onmousedown="mousedown(this)" onmouseup="mouseup(this)" ondragstart="return false">
			<div :id="'R'+(r-1)" class="r" v-for="r in matrix.rows">
				<div :id="'C'+(r-1)+'_'+(c-1)" class="c" onmouseenter="enter(this)" v-for="c in matrix.cols"></div>
			</div>
		</div>
		<div class="actions">
			<input type="button" value="Clear" onclick="clearMatrix();stringFromMatrix()">
		</div>
		<div class="data">
			<textarea v-model="encodedData" style="width:100%" v-on:change="VtoMatrix(encodedData)" rows=5>
		</div>
	</div>
		
	
</body>
</html>